<script setup>
import { onMounted, ref,getCurrentInstance, watch } from 'vue'
import { useCityStore } from "@/stores/city";
import { useRouter } from 'vue-router';
import {setGeoLayer} from '@/utils/setGeoLayer'
const { proxy } = getCurrentInstance()
const cityStore = useCityStore()
const router = useRouter()
const searchInput = ref(null)

const handleClick = () => {
    router.push('/city')
}
let map
const  searchCity = ()=>{
   setGeoLayer(map,searchInput.value).then(res=>{
    //console.log(res)
    if(res){
        cityStore.setNowCity(res)
    }
   })
}

onMounted(() => {
    map = proxy.$map
    //console.log(searchInput.value)
    searchInput.value = cityStore.nowCity
})
</script> 
<template>
    <div class="header">
        <div class="position" @click="handleClick">
            <div>{{ cityStore.nowCity }} </div>
            <img src="@/assets/images/地点.png" alt="">
        </div>
        <div class="search">
            <img src="@/assets/images/搜索.png" alt="" @click="searchCity">
            <input type="text" placeholder="请输入搜索城市" v-model="searchInput">
        </div>
    </div>
</template> 
<style scoped>
.header {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100vw;
    background-color: #4264fb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
}

.position {
    height: 100%;
    padding: 30px;
    color: #ffd04b;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.position img {
    width: 20px;
    height: 20px;
}
.position:hover{
    background-color: #3255f0;
}

.search {
    height: 70%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #fff;
    background-color: #fff;
    border-radius: 10px;
}
.search img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}
.search input {
    width: 100%;
    height: 80%;
    border: none;
    outline: none;
    font-size: 16px;
    padding-left: 10px;
    color: #666;
    border-left: 1px solid #ccc;
}
</style>